<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
		<title>LayIM 3.x PC版本地演示</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script>
		<script src="https://cdn.bootcss.com/Faker/3.1.0/faker.min.js"></script>
		<link rel="stylesheet" href="./layim/src/css/layui.css" />
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> -->
		<style>
			html {
				background-color: #333;
			}
      .layim-chat-user{
        border-radius: 50%;
        border: 1px solid lightgray;
      }
		</style>
	</head>

	<body>
		<script src="./layim/src/layui.js"></script>
		<script>
			const initData = {
				avatar: `https://xsgames.co/randomusers/assets/avatars/pixel/${parseInt((Math.random()*100+1))}.jpg`,
			};

			function init() {
				// 个人信息
				const mineInfo = {
					username: faker.name.findName(), //我的昵称
					id: new Date().valueOf(), //我的ID  用时间戳代替
					status: "online", //在线状态 online：在线、hide：隐身
					sign: "", //我的签名
					avatar: initData.avatar, //我的头像
				};

				//群组信息 暂时只要一个群
				const groupInfo = {
					groupname: "摸鱼大队", //群组名
					id: "101", //群组ID
					avatar: "./assets/imgs/avatar001.gif", //群组头像
					sign: "动态一时爽，重构火葬场",
				};
				const groupList = [groupInfo];

				layui.use("layim", function (layim) {
					layim
						.config({
							brief: true, //是否简约模式（如果true则不显示主面板）
							init: {
								mine: mineInfo,
								group: groupList,
							},
							notice: true,
							isfriend: false,
							copyright: true,
						})
						.chat({
							...groupInfo,
							type: "group",
							name: groupInfo.groupname,
						});

					let socketURL = "http://127.0.0.1:3000";
					let socket = io(socketURL);
					window.toUser = "";
					let uid = mineInfo.id;
					// socket连接后以uid登录
					socket.on("connect", function () {
						socket.emit("login", uid);
					});
					socket.on("update_online_count", function (online_stat) {
						layim.setChatStatus(online_stat);
					});
					socket.on("new_msg", function (msg) {
						console.log("收到消息：" + msg);
					});

					layim.on("sendMessage", function (res) {
						socket.send(res);
					});

					socket.on("groupMsg", function (msg) {
						console.log(msg);
						if (msg.fromid !== mine.id) {
							layim.getMessage(msg);
						}
					});
				});
			}
		
    
      init()
    </script>
	</body>
</html>
